<template>
    <view class="content">
		<image src="../../static/image/bg_1.png" class="bg-1"></image>
        <u-navbar :is-back="true" back-icon-color="#000" :border-bottom="false" title="帮助中心" title-color="#000"
			:background="background" :immersive="true"></u-navbar>
		
		<view class="wrapper" :style="{paddingTop: statusBar + 155 + 'px'}">
			<view class="box">
				<view class="item">
					<image src="../../static/image/img_1.png" class="img-1"></image>
					<view class="u-flex-1">
						<view class="title">售后服务</view>
						<view class="sub">进入查看平台售后服务具体详情</view>
					</view>
					<view class="btn" @click="toPage(1)">查看</view>
				</view>
				<view class="item">
					<image src="../../static/image/img_2.png" class="img-1"></image>
					<view class="u-flex-1">
						<view class="title">常见问题</view>
						<view class="sub">进入查看平台常见问题</view>
					</view>
					<view class="btn" @click="toPage(2)">查看</view>
				</view>
			</view>
			
			<view class="box">
				<view class="item">
					<image src="../../static/image/img_3.png" class="img-1"></image>
					<view class="u-flex-1">
						<view class="title">联系我们</view>
						<view class="sub">宇一商学院联系详情</view>
					</view>
					<view class="btn" @click="toPage(3)">查看</view>
				</view>
			</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                background: {
                    backgroundColor: 'rgba(255,255,255,0)',
                },
                statusBar: 0,
            };
        },
        onLoad(option) {
            let _this = this;
            //状态栏高度
            uni.getSystemInfo({
                success: function(res) {
                    _this.statusBar = res.statusBarHeight;
                }
            });
            
        },
        methods: {
			toPage(num) {
				// 如果只有一条数据，直接进入详情页，否则先进入列表页
				this.$gTo(`./list?num=${num}`)
				// this.$gTo(`./details`)
			},
			
            // 滚动监听
            onPageScroll: function(e) {
                //nvue暂不支持滚动监听，可用bindingx代替
                // console.log("滚动距离为：" + e.scrollTop);
                let a = e.scrollTop * 0.05;
                if (a > 1) {
                    a = 1;
                }
                if (e.scrollTop == 0) {
                    this.background.backgroundColor = 'rgba(178,209,254,0)';
                } else {
                    this.background.backgroundColor = 'rgba(178,209,254,' + a + ')';
                }
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.bg-1{
		width: 750rpx;
		height: 440rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.wrapper{
		padding: 0 20rpx;
	}
	.box{
		background-color: #fff;
		border-radius: 20rpx;
		padding: 0 30rpx;
		margin-bottom: 20rpx;
	}
	.item{
		padding: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.item:last-child{
		border-bottom: none;
	}
	.img-1{
		width: 63rpx;
		height: 63rpx;
		margin-right: 18rpx;
	}
	.title{
		font-size: 32rpx;
		font-weight: bold;
	}
	.sub{
		font-size: 24rpx;
		color: #959595;
		padding-top: 8rpx;
	}
	.btn{
		font-size: 26rpx;
		color: #2771ba;
		padding: 18rpx 36rpx;
		background-color: #e2f1ff;
		border-radius: 20rpx;
	}
	

</style>
